<script setup lang='ts'>
import { getBlogDetailInfo, getComments, getPostComment, getBlogLike, getDelBlog } from '@/api/blog';
import { setFollow } from '@/api/user';
import { userStatesStore } from '@/states/userSates';
// import { showFailToast } from 'vant/es';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import BlogCommentsList from '@/components/BlogCommentList.vue'
// import { showConfirmDialog, showToast } from 'vant';

const router = useRouter()
const route = useRoute()
const id = route.query.id
const blogInfo = ref()
const author = ref()
const images:any = ref([])
// 获取帖子内容
const getBlogDetail = async () => {
  const res = await getBlogDetailInfo(id as string)
  blogInfo.value = res.data.data
  author.value = res.data.data.author
  if(res.data.data.images){
    images.value.push(...(res.data.data.images.split(',')))
  }
  
}
// 获取用户信息
const userStore = userStatesStore()

onMounted(() =>{
  getBlogDetail()
  getBlogComments()
  userStore.getUserInfo()
})

const toAuthor = () => {
  router.push({
    path: '/user/detail',
    query: {
      id: author.value.id
    }
  })
}
// 关注
const follow = async () => {
  const res = await setFollow(author.value.id)
  if(res.data.code===0){
    getBlogDetail()
  }else{
    showFailToast('关注失败'+res.data.description)
  }
}

// 获取帖子评论
const comments = ref()
const getBlogComments = async () => {
  const res = await getComments(id as string)
  comments.value = res.data.data
}

// 发布评论
const postComment = ref('')
const sendComment = async () => {
  const res = await getPostComment(blogInfo.value.id,postComment.value)
  if(res.data.code === 0){
    showToast('发布成功')
    postComment.value = ''
    getBlogDetail()
    getBlogComments()
  }
}

// 点赞帖子
const blogLike = async () => {
  const res = await getBlogLike(blogInfo.value.id)
  if(res.data.code === 0){
    getBlogDetail()
  }
}

// 分享
const showBottom = ref(false)
// 复制链接
const copyUrl = () => {
    var textArea = document.createElement('textarea')
    document.body.appendChild(textArea)
    textArea.readOnly = 'readonly'
    textArea.style.opacity = '0'
    textArea.value = document.location.href
    textArea.select()
    if (textArea.setSelectionRange)
        textArea.setSelectionRange(0, textArea.value.length)
    else
        textArea.select()
    document.execCommand("copy")
    document.body.removeChild(textArea)
    //指定toast样式，使文字在一行显示
    showToast({
        message: "已复制到剪切板",
        className: "copyToast"
    })
    showBottom.value = false
}
// 举报
const report = () => {
    showFailToast("举报成功")
    showBottom.value = false
}
// 删除帖子
const deleteBlog = async () => {
    showConfirmDialog({
        title: '确定要删除帖子吗',
        message:
            '此操作无法撤回',
    })
        .then(async () => {
            let res = await getDelBlog(blogInfo.value.id)
            if (res?.data.code === 0) {
                await router.replace("/")
                showToast("删除成功")
            }
        })
        .catch(() => {
            showBottom.value = false
        });
}
// 编辑帖子
const updateBlog = () => {
    router.push({
        path: "/blog/add",
        query: {
            id: blogInfo.value.id,
            images: images.value,
            title: blogInfo.value.title,
            content: blogInfo.value.content
        }
    })
}
</script>
<template>
  <van-sticky>
    <nav class="nav" v-if="author">
      <van-icon @click="$router.back()" name="arrow-left" color="#383838" size="1.5rem" class="leftIcon" />
      <van-image round width="2.5rem" height="2.5rem" style="margin-left: 10px;" :src="author.avatarUrl"
        @click="toAuthor" />
      <span @click="toAuthor" style="margin-left: 10px;">{{ author.username }}</span>
      <div class="follow">
        <van-button @click="follow()" class="button" v-if="!author.isFollow && author.id != userStore.userInfo?.id"
          plain round type="danger">关注</van-button>
        <van-button @click="follow()" class="button" v-else-if="author.id != userStore.userInfo?.id" plain round
          style="color: #c1c1c1;">已关注</van-button>
        <van-icon name="ellipsis" size="1.5rem" style="margin-right: 10px;" @click="showBottom=true"/>
      </div>
    </nav>
    <van-divider />
  </van-sticky>
   <van-popup
        v-if="blogInfo?.userId===userStore.userInfo?.id || userStore.userInfo?.role===1"
        v-model:show="showBottom"
        round
        position="bottom"
        :style="{ height: '88px' }"
    >
        <van-grid :border="false">
            <van-grid-item @click="copyUrl">
                <template #icon>
                    <van-icon  name="link-o" size="24"/>
                </template>
                <template #text>
                    <span class="grid-font">复制链接</span>
                </template>
            </van-grid-item>
            <van-grid-item @click="updateBlog">
                <template #icon>
                    <van-icon name="edit" size="24"/>
                </template>
                <template #text>
                    <span class="grid-font">编辑</span>
                </template>
            </van-grid-item>
            <van-grid-item @click="deleteBlog">
                <template #icon>
                    <van-icon name="delete-o" size="24"/>
                </template>
                <template #text>
                    <span class="grid-font">删除</span>
                </template>
            </van-grid-item>
            <van-grid-item @click="report">
                <template #icon>
                    <van-icon name="warn-o" size="24"/>
                </template>
                <template #text>
                    <span class="grid-font">举报</span>
                </template>
            </van-grid-item>
        </van-grid>
    </van-popup>
    <van-popup
        v-else
        v-model:show="showBottom"
        round
        position="bottom"
        :style="{ height: '88px' }"
    >
        <van-grid :border="false" :column-num="2">
            <van-grid-item @click="copyUrl">
                <template #icon>
                    <van-icon name="link-o" size="24"/>
                </template>
                <template #text>
                    <span class="grid-font">复制链接</span>
                </template>
            </van-grid-item>
            <van-grid-item @click="report">
                <template #icon>
                    <van-icon name="warn-o" size="24"/>
                </template>
                <template #text>
                    <span class="grid-font">举报</span>
                </template>
            </van-grid-item>
        </van-grid>
    </van-popup>
  <van-swipe>
    <van-swipe-item v-for="image in images" :key="image">
      <van-image fit="contain" :src="image" style="height: 300px; width: 100%;" />
    </van-swipe-item>
    <template #indicator="{ active, total }">
      <div v-if="total>1" class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
    </template>
  </van-swipe>
  <article v-if="blogInfo">
    <h3 class="note-title">{{ blogInfo.title }}</h3>
    <p class="blogContent">{{ blogInfo.content}}</p>
    <p class="updateTime">{{ blogInfo.updateTime }}</p>
  </article>
  <van-divider class="divider" />
  <article style="padding-bottom: 100px;" v-if="blogInfo">
    <span class="commentsNum">{{ '共' + blogInfo.commentsNum + '条评论' }}</span>
    <BlogCommentsList  :comments-list="comments" @del-commment="getBlogComments"></BlogCommentsList>
    <div v-if="comments?.length===0" style="text-align: center; margin-top: 20px;font-size: 12px; color: #5f5e5e;">——这里还是一片荒地——  快去评论一下</div>
  </article>
  <van-sticky position="top">
    <footer class="footer" v-if="blogInfo">
      <div class="input-container">
        <van-field v-model="postComment" placeholder="有话要说，快来评论" autosize rows="1" type="textarea" />
        <van-button @click="sendComment" v-if="postComment" round class="sendButton" hairline
          type="primary">发送</van-button>
        <div class="footerLike">
          <van-icon size="1.5rem" name="envelop-o" />
          <span style="margin-left: 2px">{{ blogInfo.commentsNum }}</span>
          <van-icon @click="blogLike()" size="1.5rem" v-if="!blogInfo?.isLike" name="like-o"
            style="margin-left: 5px;" />
          <van-icon @click="blogLike()" size="1.5rem" v-else name="like" style="margin-left: 5px;"
            color="red" />
          <span @click="blogLike()" style="margin-left: 2px;">{{ blogInfo.likedNum }}</span>
        </div>
      </div>
    </footer>
  </van-sticky>
</template>
<style scoped >
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* 确保页面高度占满整个视窗 */
}

.nav{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  background-color: white;
}
.leftIcon{
 margin-left: 10px;
}
.van-divider{
  margin: 0;
}
.button{
  margin-right: 10px;
  height: 30px;
}
.follow{
  display: flex;
  align-items: center;
  margin-left: auto;
}
.custom-indicator {
  position: absolute;
  right: 10px;
  width: 20px;
  height: 15px;
  text-align: center;
  top: 10px;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 10px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
}
.note-title {
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin: 15px 10px 5px;
}
.blogContent{
  margin: 0 10px;
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
  font-weight: normal;
}
.updateTime{
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 12px;
  color: #999999;
  line-height: 1.5;
  font-weight: normal;
  margin-left: 10px;
}
.divider{
  background-color: #e0e0e0; 
  margin: 15px 10px; 
}
.commentsNum{
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
  font-weight: normal;
  margin: 10px 10px;
}
.footer{
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.input-container {
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 5px 10px;
}
.van-cell {
  background: #ebebeb;
  border-radius: 20px;
}
.sendButton{
  margin-left: 5px;
  width: 90px;
  height: 44px;
}
.footerLike{
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.grid-font {
    font-size: 13px;
    color: #949494;
    margin-top: 5px
}
</style>
